<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Boost C++ Libraries</title>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <link rel="icon" href="/favicon.ico" type="image/ico" />
  <link rel="stylesheet" type="text/css" href=
  "/style-v2/section-development.css" />
  <!--[if IE 7]> <style type="text/css"> body { behavior: url(/style-v2/csshover3.htc); } </style> <![endif]-->
</head><!--
Note: Editing website content is documented at:
https://www.boost.org/development/website_updating.html
-->

<body>
  <div id="heading">
    <!--#include virtual="/common/heading.html" -->
  </div>

  <div id="body">
    <div id="body-inner">
      <div id="content">
        <div class="section" id="intro">
          <div class="section-0">
            <div class="section-title">
              <h1>Website Exemplars</h1>
            </div>

            <div class="section-body">
              <p>This is both a test page and a guide as to the various
              styled elements available in the Boost web pages. And for self
              reference this is a [class="section-body"] div inside a
              [class="section"] div. Each [class="section"] div should have a
              corresponding "id", in this case the section is [id="intro"].
              Feel free to copy elements from here onto other pages to
              quickly get the structure you want. <strong>And of more import
              please update this page if you add new content styles as it
              helps everyone with the website documentation.</strong></p>
            </div>
          </div>
        </div>

        <div class="section" id="exemplar-section">
          <div class="section-0">
            <div class="section-title">
              <h1>Section [class="section-title"]</h1>
            </div>

            <div class="section-body">
              <p>Simple paragraph inside the section body
              [class="section-body"].</p>

              <h2>Heading 2</h2>

              <p><img src=
              "http://sourceforge.net/sflogo.php?group_id=7586&amp;type=3"
              alt="SourceForge.net" class="left-inset" />The image to the
              left uses a [class="left-inset"] as a shorthand for any
              floating inset element aligned at both top and left edges.
              &mdash; Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Duis ligula lorem, consequat eget, tristique nec, auctor
              quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
              Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
              Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan
              aliquam, tellus dui fringilla quam, in condimentum augue lorem
              non tellus. Pellentesque id arcu non sem placerat iaculis.
              Curabitur posuere, pede vitae lacinia accumsan, enim nibh
              elementum orci, ut volutpat eros sapien nec sapien. Suspendisse
              neque arcu, ultrices commodo, pellentesque sit amet, ultricies
              ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris
              laoreet posuere odio. Nam ipsum ligula, ullamcorper eu,
              fringilla at, lacinia ut, augue. Nullam nunc.</p>

              <h3>Heading 3</h3>

              <p><img src=
              "http://sourceforge.net/sflogo.php?group_id=7586&amp;type=4"
              alt="SourceForge.net" class="right-inset" />This image uses a
              [class="right-inset"] to as a mirror of the previous section
              for a floating inset element aligned to top and right edges.
              &mdash; Sed et lectus in massa imperdiet tincidunt. Praesent
              neque tortor, sollicitudin non, euismod a, adipiscing a, est.
              Mauris diam metus, varius nec, faucibus at, faucibus
              sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum
              tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam
              interdum ullamcorper libero. Morbi vehicula imperdiet justo.
              Etiam mollis fringilla ante. Donec et dui. Class aptent taciti
              sociosqu ad litora torquent per conubia nostra, per inceptos
              hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac,
              lectus.</p>

              <h4>Heading 4</h4>

              <p>These are, hopefully all, the standard text markup styles.
              Note, these are <em>not</em> structural markup elements. I.e.
              these are the styles one sees to mark parts of the text inside
              a paragraph, like the "not" in the second sentence of this
              paragraph.</p>

              <dl>
                <dt>EM:</dt>

                <dd>Indicates <em>emphasis</em>.</dd>

                <dt>STRONG:</dt>

                <dd>Indicates <strong>stronger emphasis</strong>.</dd>

                <dt>CITE:</dt>

                <dd>Contains a <cite>citation or a reference</cite> to other
                sources.</dd>

                <dt>DFN:</dt>

                <dd>Indicates that this is the <dfn>defining instance</dfn>
                of the enclosed term.</dd>

                <dt>CODE:</dt>

                <dd>Designates a fragment of <code>computer code</code>.</dd>

                <dt>SAMP:</dt>

                <dd>Designates <samp>sample output</samp> from programs,
                scripts, etc.</dd>

                <dt>KBD:</dt>

                <dd>Indicates <kbd>text to be entered</kbd> by the user.</dd>

                <dt>VAR:</dt>

                <dd>Indicates an instance of a <var>variable</var> or program
                argument.</dd>

                <dt>ABBR:</dt>

                <dd>Indicates an abbreviated form (e.g., <abbr>WWW</abbr>,
                <abbr>HTTP</abbr>, <abbr>URI</abbr>, <abbr>Mass.</abbr>,
                etc.).</dd>

                <dt>ACRONYM:</dt>

                <dd>Indicates an acronym (e.g., <acronym>WAC</acronym>,
                <acronym>radar</acronym>, etc.).</dd>

                <dt>Q:</dt>

                <dd>Indicates a <q>quotation possibly with
                <q>sub-quotes</q></q>.</dd>

                <dt>SUB and SUP:</dt>

                <dd>Indicates either sub<sub>scripts</sub> or
                super<sup>scripts</sup>.</dd>

                <dt>INS and DEL:</dt>

                <dd>
                  Used to markup sections of the document that have been
                  <ins>inserted</ins> or <del>deleted</del> with respect to a
                  different version of a document.
                </dd>
              </dl>

              <h5>Heading 5</h5>

              <p>There are a variety of HTML structural elements. This means
              that they do not tipically show with text flow. Bu tinstead
              show as individual block elements. This paragraph being an
              example. And the somewhat overused BLOCKQUOTE being
              another:</p>

              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Duis ligula lorem, consequat eget, tristique nec, auctor
                quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus.
                Aenean viverra malesuada libero. Fusce ac quam. Donec neque.
                Nunc venenatis enim nec quam. Cras faucibus, justo vel
                accumsan aliquam, tellus dui fringilla quam, in condimentum
                augue lorem non tellus. Pellentesque id arcu non sem placerat
                iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim
                nibh elementum orci, ut volutpat eros sapien nec sapien.
                Suspendisse neque arcu, ultrices commodo, pellentesque sit
                amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus
                mollis. Mauris laoreet posuere odio. Nam ipsum ligula,
                ullamcorper eu, fringilla at, lacinia ut, augue. Nullam
                nunc.</p>
              </blockquote>

              <p>The Boost pages avoid the use of tables as a layout
              mechanism. This helps, and hurts, in a variety of ways. The
              most important benefit is the wider semantic access of the
              content. It means that the largest set of browsers will
              interpret tables as what they are; tabular content. The
              following convenient sample comes from the helpful <a href=
              "http://www.w3.org/TR/html4/struct/tables.html#h-11.5" class=
              "external">HTML4 W3 standard</a>:</p>

              <table summary=
              "Code page support in different versions of MS Windows.">
                <caption>
                  CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
                </caption>

                <colgroup></colgroup>

                <colgroup></colgroup>

                <colgroup span="2"></colgroup>

                <colgroup span="3"></colgroup>

                <thead>
                  <tr>
                    <th>Code-Page ID</th>

                    <th>Name</th>

                    <th>ACP</th>

                    <th>OEMCP</th>

                    <th>Windows NT 3.1</th>

                    <th>Windows NT 3.51</th>

                    <th>Windows 95</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>1200</td>

                    <td>Unicode (BMP of ISO/IEC-10646)</td>

                    <td></td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>*</td>
                  </tr>

                  <tr>
                    <td>1250</td>

                    <td>Windows 3.1 Eastern European</td>

                    <td>X</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1251</td>

                    <td>Windows 3.1 Cyrillic</td>

                    <td>X</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1252</td>

                    <td>Windows 3.1 US (ANSI)</td>

                    <td>X</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1253</td>

                    <td>Windows 3.1 Greek</td>

                    <td>X</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1254</td>

                    <td>Windows 3.1 Turkish</td>

                    <td>X</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1255</td>

                    <td>Hebrew</td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1256</td>

                    <td>Arabic</td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1257</td>

                    <td>Baltic</td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>1361</td>

                    <td>Korean (Johab)</td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td>**</td>

                    <td>X</td>
                  </tr>
                </tbody>

                <tbody>
                  <tr>
                    <td>437</td>

                    <td>MS-DOS United States</td>

                    <td></td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>708</td>

                    <td>Arabic (ASMO 708)</td>

                    <td></td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>709</td>

                    <td>Arabic (ASMO 449+, BCON V4)</td>

                    <td></td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>710</td>

                    <td>Arabic (Transparent Arabic)</td>

                    <td></td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>

                  <tr>
                    <td>720</td>

                    <td>Arabic (Transparent ASMO)</td>

                    <td></td>

                    <td>X</td>

                    <td></td>

                    <td></td>

                    <td>X</td>
                  </tr>
                </tbody>
              </table>

              <h6>Heading 6</h6>

              <p>One of the most important elements of HTML is the hypertext
              link. In the Boost pages all <a href="/">links</a> are treated
              in a similar, consistent, manner regardless of context as much
              as possible. Stylistic variations are present to account for
              color contrast differences in the context. For example the
              links in the header, and footer use different colors to match
              the text color and contrast as much as possible with the
              respective backgrounds. Within section content, like here, the
              links also provide differing look &amp; feel based on wether
              they target the <a href="/">Boost web site</a>, or some
              <a href="http://www.google.com/" class="external">external web
              site [class="external"]</a>. Since most of the time links are
              internal, that is the default semantic. External links need to
              be decorated with [class="external"].</p>

              <ul class="directory">
                <li>
                  <h2>One</h2>

                  <p>This a "directory" unordered list [ul
                  class="directory"]. It is styled to show a list of short
                  items in as compact a form as possible. Currently that
                  means the items are arrayed in two columns and items are
                  packed to read left-to-right and top-to-bottom.</p>
                </li>

                <li>
                  <h2>Two</h2>

                  <p>Even though this an unordered list, one can also arrange
                  any block elements in this way. The top container needs to
                  be a [class="directory"] and the interior items
                  [class="directory-item"].</p>
                </li>
              </ul>

              <h2>Unordered Lists [ul]</h2>

              <p>This type of list is one of the most commonly used
              structural elements used. It's used for directory listing,
              history listings, table of contests, and many more. The goal is
              to classify the various lists by type with a
              [class="type-here"] attribute on the list [ul]. Please resist
              the urge to use a classification just because it has the
              particular look you want. As at some future point the look will
              change and you will have no say in the effect of the particular
              context.</p>

              <h3>Default [ul]</h3>

              <ul>
                <li>Item 1

                  <ul>
                    <li>Subitem 1a

                      <ul>
                        <li>Subitem 1a1</li>

                        <li>Subitem 1a2</li>
                      </ul>
                    </li>

                    <li>Subitem 1b</li>
                  </ul>
                </li>

                <li>Item 2

                  <ul>
                    <li>Subitem 2a</li>

                    <li>Subitem 2b</li>
                  </ul>
                </li>
              </ul>

              <h3>Directory [ul class="directory"]</h3>

              <ul class="directory">
                <li>Item 1

                  <ul>
                    <li>Subitem 1a

                      <ul>
                        <li>Subitem 1a1</li>

                        <li>Subitem 1a2</li>
                      </ul>
                    </li>

                    <li>Subitem 1b</li>
                  </ul>
                </li>

                <li>Item 2

                  <ul>
                    <li>Subitem 2a</li>

                    <li>Subitem 2b</li>
                  </ul>
                </li>
              </ul>

              <h3>Table of contents [ul class="toc"]</h3>

              <ul class="toc">
                <li>
                  <a href="#">Item 1</a>

                  <ul>
                    <li><a href="#">Subitem 1a</a></li>

                    <li><a href="#">Subitem 1b</a></li>
                  </ul>
                </li>

                <li>
                  <a href="#">Item 2</a>

                  <ul>
                    <li><a href="#">Subitem 2a</a></li>

                    <li><a href="#">Subitem 2b</a></li>
                  </ul>
                </li>
              </ul>

              <h3>History [ul class="history"]</h3>

              <ul class="history">
                <li>Item 1

                  <ul>
                    <li>Subitem 1a</li>

                    <li>Subitem 1b</li>
                  </ul>
                </li>

                <li>Item 2

                  <ul>
                    <li>Subitem 2a</li>

                    <li>Subitem 2b</li>
                  </ul>
                </li>
              </ul>

              <h3>Menus [ul class="menu"]</h3>

              <ul class="menu">
                <li><a href="#">Item 1</a></li>

                <li><a href="#">Item 2</a></li>
              </ul>

              <h3>Tree [ul class="tree"]</h3>

              <ul class="tree">
                <li>Item 1

                  <ul>
                    <li>Subitem 1a

                      <ul>
                        <li>Subitem 1a1</li>

                        <li>Subitem 1a2</li>
                      </ul>
                    </li>

                    <li>Subitem 1b</li>
                  </ul>
                </li>

                <li>Item 2

                  <ul>
                    <li>Subitem 2a</li>

                    <li>Subitem 2b</li>
                  </ul>
                </li>
              </ul>

              <h2>Preformatted [pre]</h2>

              <p>This is often used to show code examples, or more accurately
              fixed examples. For example the <a href=
              "/users/license.html">Boost Software License</a>:</p>
              <pre>
<!--#include virtual="../LICENSE_1_0.txt" -->
</pre>
            </div>
          </div>
        </div>
      </div>

      <div id="sidebar">
        <!--#include virtual="/common/sidebar-common.html" -->
        <!--#include virtual="/common/sidebar-development.html" -->
      </div>

      <div class="clear"></div>
    </div>
  </div>

  <div id="footer">
    <div id="footer-left">
      <div id="revised">
        <p>Revised $Date$</p>
      </div>

      <div id="copyright">
        <p>Copyright Rene Rivera 2005.</p>
      </div><!--#include virtual="/common/footer-license.html" -->
    </div>

    <div id="footer-right">
      <!--#include virtual="/common/footer-banners.html" -->
    </div>

    <div class="clear"></div>
  </div>
</body>
</html>
